<template>
  <div class="flex flex-col min-h-screen">
    <Header />
    <main class="flex-grow">
      <div class="max-w-screen-xl mx-auto p-4">
        <div class="flex items-center mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-blue-600 mr-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
            <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
            <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
          </svg>
          <h1 class="text-2xl font-bold text-gray-800">公告</h1>
        </div>
        
        <div v-if="loading" class="flex justify-center my-10">
          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
        </div>
        
        <div v-else-if="notices.length === 0" class="text-center py-16 bg-gray-50 rounded-lg shadow-sm">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 mx-auto text-gray-400 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
            <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
            <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
          </svg>
          <p class="text-lg text-gray-600">暂无公告信息</p>
          <p class="mt-2 text-gray-500">请稍后再来查看</p>
        </div>
        
        <div v-else class="space-y-6">
          <div v-for="notice in notices" :key="notice.id" 
               class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-blue-500 hover:shadow-md transition-shadow">
            <div class="flex items-center mb-4">
              <h2 class="text-xl font-semibold text-gray-800 hover:text-blue-600 transition-colors">{{ notice.title }}</h2>
              <div class="ml-auto flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                {{ formatDate(notice.createdAt) }}
              </div>
            </div>
            
            <div class="notice-content text-gray-700 leading-relaxed" v-html="notice.content"></div>
          </div>
        </div>
      </div>
    </main>
    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getDisplayedNotices } from '@/api/frontend/notices'
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'

const notices = ref([])
const loading = ref(true)

onMounted(async () => {
  await fetchNotices()
})

const fetchNotices = async () => {
  loading.value = true
  try {
    const res = await getDisplayedNotices()
    if (res.success) {
      notices.value = res.data
    }
  } catch (error) {
    console.error('获取公告失败:', error)
  } finally {
    loading.value = false
  }
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}
</script>

<style scoped>
.notice-content :deep(a) {
  color: #3b82f6;
  text-decoration: underline;
  transition: color 0.2s;
}

.notice-content :deep(a:hover) {
  color: #2563eb;
}

.notice-content :deep(img) {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.notice-content :deep(h1, h2, h3, h4, h5, h6) {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: #1e293b;
}

.notice-content :deep(p) {
  margin-bottom: 1rem;
}

.notice-content :deep(ul, ol) {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.notice-content :deep(li) {
  margin-bottom: 0.5rem;
}

.notice-content :deep(blockquote) {
  border-left: 4px solid #e2e8f0;
  padding: 1rem;
  margin: 1rem 0;
  background-color: #f8fafc;
  border-radius: 0.25rem;
  font-style: italic;
  color: #64748b;
}

.notice-content :deep(code) {
  background-color: #f1f5f9;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875em;
}

.notice-content :deep(pre) {
  background-color: #1e293b;
  color: #f8fafc;
  padding: 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  margin: 1rem 0;
}

.notice-content :deep(pre code) {
  background-color: transparent;
  padding: 0;
  color: inherit;
}

/* Add smooth animations for page loading */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.space-y-6 > * {
  animation: fadeIn 0.5s ease-out forwards;
}

.space-y-6 > *:nth-child(1) { animation-delay: 0.1s; }
.space-y-6 > *:nth-child(2) { animation-delay: 0.2s; }
.space-y-6 > *:nth-child(3) { animation-delay: 0.3s; }
.space-y-6 > *:nth-child(4) { animation-delay: 0.4s; }
.space-y-6 > *:nth-child(5) { animation-delay: 0.5s; }
</style>
